<template>
  <div class="w-full h-full" style="background: #f8f8f8">
    <div class="w-full h-full rounded-xl bg-white mt-3 pt-3 pl-3 pr-3">
      <div class="flex items-center mb-2">
        <div class="flex items-center bg-indigo-50/60 rounded-lg py-0.5 px-2">
          <i class="iconfont icon-shishikucunshiyitu text-indigo-500 text-base"/>
          <span class="title font-semibold text-indigo-600 ml-1.5">{{$t('tank.PremixedDetails')}}</span>
        </div>
        <div class="flex-1 h-[1px] bg-gradient-to-r from-indigo-200 via-indigo-100/50 to-transparent ml-3"></div>
        <el-form :inline="true" :model="from" size="small" class="align-center search-form">
          <el-form-item class="label" :label="$t('iot.time')">
            <el-date-picker
              style="width: 220px"
              v-model="data.time"
              type="daterange"
              range-separator="-"
              :disabled-date="disabledDate"
              :start-placeholder="$t('wms.startTime')"
              :end-placeholder="$t('wms.endTime')"
              class="custom-date-picker"
            />
          </el-form-item>
          <el-button icon="Search" class="buttons" size="small" type="primary" @click="getSerch">{{$t('wms.search')}}</el-button>
          <el-button class="buttons" size="small" type="primary" @click="goBack">{{$t('common.fanhui')}}</el-button>
        </el-form>
      </div>
      <div class="table-list w-full h-full">
        <el-table
          ref="tableRef"
          border
          id="out-table"
          :data="detailList"
          :fit="true"
          table-layout="fixed"
          header-align="center"
          v-loading="data.Loading"
          style="width:100%;height: 89%;"
          :header-cell-style="{
        color: '#1e293b',
        textAlign: 'center',
        fontWeight: '600',
        background: 'linear-gradient(to bottom, #f8fafc, #f1f5f9)',
        borderColor: '#e2e8f0',
        height: '40px'
      }"
          :cell-style="{
             textAlign: 'center',
             color: '#334155',
             borderColor: '#e2e8f0',
             background: '#fff',
             height: '40px'
         }"
        >
          <el-table-column prop="produce_end_time" :label="$t('tank.Date')" show-overflow-tooltip/>
          <el-table-column prop="material_code" :label="$t('tank.MaterialNumber')" show-overflow-tooltip>
              <template #default="scope">
                <el-tag type="warning" effect="light">{{  scope.row.material_code||'--' }}</el-tag>
              </template>
          </el-table-column>
          <el-table-column prop="material_name" :label="$t('tank.MaterialName')" show-overflow-tooltip/>
          <el-table-column prop="specification" :label="$t('tank.MaterialSpecification')" show-overflow-tooltip/>
          <el-table-column prop="source_location_code" :label="$t('tank.SourceTank')" align="center">
            <template #default="scope">
              <el-tag type="primary" effect="light">{{  scope.row.source_location_code }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="qty" :label="$t('tank.InputWeight')" align="center">
            <template #default="scope">
              <el-tag type="success" effect="light">{{  scope.row.qty }} kg</el-tag>
            </template>
          </el-table-column>
        </el-table>

        <div class="flex justify-end mt-3">
          <el-pagination
            :current-page="data.page"
            :page-size="data.size"
            :page-sizes="[10, 20, 50, 100]"
            small
            background
            class="custom-pagination"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

    </div>
  </div>
</template>
<script setup>
import '@/style/tailwind.css'
import moment from 'moment';
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getTankNumDetailIn, getTankNumDetailOut } from '@/api/tankBodyApi'

//引入路由
const route = useRoute()
const router = useRouter()

const detailList = ref([])

const  data  = reactive({
  size:10,
  page:1,
  total:0,
  time: [],
  Loading:false,
  tankCode: "",
  materialCode: "",
  sumQty:''
})

const formatNumber= (num) => {
  if (Number.isInteger(Number(num))) {
    return num;
  }
  return parseFloat(num).toFixed(2) || "--"
}
const getDetailList = async (id) => {
  data.Loading = true
  try {
    const params = {
      startTime: data?.time?.[0] ? moment(data.time[0]).format('YYYY-MM-DD') : '',
      endTime:  data?.time?.[1] ? moment(data.time[1]).format('YYYY-MM-DD') : '',
      current:data.page,
      size:data.size,
      tankCode: data.tankCode,
      materialCode: data.materialCode
    }
    const res = await getTankNumDetailOut(params)
    detailList.value = res.data.page.records?.map((item)=>{
      return {
        ...item,
        qty: formatNumber(item.qty)
      }
    })
    data.total = res.data.page.total
    data.sumQty = res.data.sumQty
    data.Loading = false
  } catch (e) {
    data.Loading = false
    console.log(e)
  }

}



const getSerch = () =>{
  getDetailList()
}

const goBack = () =>{
  router.back()
}
onMounted(async () => {
  //获取 路由 携带的时间参数
    data.time = [route.query.startTime,route.query.endTime]
    data.tankCode = route.query.tankCode
    data.materialCode = route.query.materialCode
   getDetailList()
})

const handleSizeChange = (val) => {
  data.size = val
  getDetailList()
}
const handleCurrentChange = (val) => {
  data.page = val
  getDetailList()
}

</script>


<style scoped lang="scss">
:deep(.el-form) {
  height: 18px;
  display: flex;
  justify-content: center;
}
</style>
